<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五子棋</title>
</head>
<style>
  .cell {
    width: 100px;
    height: 100px;
    background-color: green;
    border: 1px solid white;
    vertical-align: middle;
    line-height: 100px;
    font-size: 50px;
    text-align: center;
    display: inline-block;
  }
</style>

<body>
  <div id="board"></div>
  <script>
    //定义一个二维数组，2 表示× 1表示O 0表示没有内容
    let pattern = [
      [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0]
    ]
    // 初始化color
    let color = 1;
    //定义show方法展示棋盘
    function show() {
      // console.log(pattern.length)
      let board = document.getElementById('board');
      board.innerHTML = ''
      for (let i = 0; i < pattern.length; i++) {
        for (let j = 0; j < pattern[i].length; j++) {
          let cell = document.createElement('div');
          cell.classList.add('cell')
          cell.innerText =
            pattern[i][j] == '2' ? 'x' :
            pattern[i][j] == '1' ? 'o' :
            '';
          cell.addEventListener('click', () => userMove(i, j));
          board.appendChild(cell)
        }
        board.appendChild(document.createElement('br'))
      }
    }


    //添加按钮事件
    function userMove(x, y) {
      pattern[x][y] = color;
      if (check(pattern, color)) {
        console.log(color == 2 ? "x is winner" : "o is winner")
        // alert()
      }
      color = 3 - color;
      show()
      if (willWin(pattern, color)) {
        console.log(color == 2 ? 'x will winner' : 'o will winner')
      }
      console.log(bastChoice(pattern, color))
      computerMove()
    }

    function computerMove() {
      let choice = bastChoice(pattern, color);
      if (choice.point) {
        pattern[choice.point[0]][choice.point[1]] = color
      }
      if (check(pattern, color)) {
        alert(color == 2 ? 'X is winner' : 'O is winner')
      }
      color = 3 - color;
      show()
    }
    //判断是否获胜
    function check(pattern, color) {
      //检查每一行
      {
        for (let i = 0; i < pattern.length; i++) {
          let win = true;
          for (let j = 0; j < pattern[i].length; j++) {
            if (pattern[i][j] !== color) {
              win = false
            }
          }
          if (win) {
            return true
          }
        }
      } {
        // 检查每一列
        for (let i = 0; i < pattern.length; i++) {
          let win = true;
          for (let j = 0; j < pattern[i].length; j++) {
            if (pattern[j][i] !== color) {
              win = false
            }
          }
          if (win) {
            return true
          }
        }
      }
      // 检查正斜向
      {
        let win = true;
        for (let i = 0; i < 3; i++) {
          if (pattern[i][i] !== color) {
            win = false
          }
        }
        if (win) {
          return true
        }
      }
      // 检查反斜向
      {
        let win = true;
        for (let i = 0; i < 3; i++) {
          if (pattern[i][2 - i] !== color) {
            win = false
          }
        }
        if (win) {
          return true
        }
      }
      return false
    }

    function clone(pattern) {
      return JSON.parse(JSON.stringify(pattern))
    }


    function willWin(pattern, color) {
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          if (pattern[i][j]) {
            continue
          }
          let temp = clone(pattern)
          temp[i][j] = color;
          if (check(temp, color)) {
            return true
          }
        }
      }
      return null
    }

    function bastChoice(pattern, color) {
      let p;
      if (p = willWin(pattern, color)) {
        return {
          point: p,
          result: 1
        }
      }
      let result = -2;
      let point = null;
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          if (pattern[i][j]) {
            continue;
          }
          let temp = clone(pattern)
          temp[i][j] = color
          let r = bastChoice(temp, 3 - color).result
          if (-r > result) {
            result = -r
            point = [j, i]
          }
        }
      }
      return {
        point: point,
        result: point ? result : 0
      }

    }
    show(pattern)
  </script>
</body>

</html>